
<template>
  <li class="cart-main-content-shop-everyone">
      <section class="select" 
      v-if="showEdit"
      :class="{active:children.isSelect}" 
      @click="everyGoodsSelect({cartIndex,goodsIndex})" ></section>
      <section class="cart-main-content-shop-everyone-thumb">
          <img :src="children.itemDetail.itemThumb" alt="">
      </section>
      <section class="cart-main-content-shop-everyone-parameter">
          <section class="cart-main-content-shop-everyone-parameter-control">
              <h3 class="cart-main-content-shop-everyone-parameter-control-titles">{{children.itemDetail.itemTitle}}</h3>
              <span class="cart-main-content-shop-everyone-parameter-control-btn" v-if="showEdit" @click="deleteItem({cartIndex,goodsIndex})"><i class="fa fa-trash-o"></i></span>
          </section>
          <h3 class="cart-main-content-shop-everyone-parameter-names">{{children.itemDetail.itemName}}</h3>
          <span class="cart-main-content-shop-everyone-parameter-amount">{{children.itemDetail.amount}}</span>
          <section class="cart-main-content-shop-everyone-parameter-counts">
              <section class="cart-main-content-shop-everyone-parameter-counts-price">￥{{children.itemDetail.itemPrice}}</section>
              <ul class="cart-main-content-shop-everyone-parameter-counts-numbers" v-if="showEdit">
                  <li class="cart-main-content-shop-everyone-parameter-counts-numbers-minus" @click="minus(goodsIndex)">-</li>
                  <li class="cart-main-content-shop-everyone-parameter-counts-numbers-v">{{children.count}}</li>
                  <li class="cart-main-content-shop-everyone-parameter-counts-numbers-plus" @click="add({cartIndex,goodsIndex})">+</li>
              </ul>
          </section>
      </section>
  </li>
</template>
<script>
// import messagebox from "messagebox";
import {mapMutations} from 'vuex';
export default {
  props:['children','shopCart','shop','goodsIndex','cartIndex','showEdit'],
  mounted(){
      console.log(this.children,22222);
  },
  methods:{
      ...mapMutations(['add','everyGoodsSelect']),
      minus(goodsIndex){
          if(this.children.count<2){
               this.$confirm( 
                    '此商品的最小购买量为1,你确定要删除该商品吗',
                )
                .then((goodsIndex)=>{
                    this.shop.goodsItems.splice(goodsIndex,1)
                },()=>{
                })
            }else{
                this.children.count--;
            }
        },
        deleteItem({cartIndex,goodsIndex}){
            this.$confirm('确定要删除该商品吗？')
            .then(({cartIndex,goodsIndex})=>{
                console.log(1111)
                if(this.shop.goodsItems.length==1){
                    this.shopCart.splice(cartIndex,1)
                }else{
                this.shop.goodsItems.splice(goodsIndex,1)                    
                }
            },()=>{
                
            })
        }
    },
//   computed:{
//       ...mapGetters(['getAddCount'])
//   },
  created(){
    //   console.log(this.children,1111)
  }
}
</script>
<style lang="scss">
@import "../../../../assets/scss/_index.scss";
.cart-main-content-shop-everyone{
    padding-top: px2rem(20);
    &-thumb{
        width: px2rem(160);
        height: px2rem(123);
        margin-left: px2rem(28);
        img{
            width: 100%;
        }
    }
    &-parameter{
        flex-grow: 7;
        margin-left: px2rem(40);
        padding-bottom: px2rem(16);
        border-bottom: 1px solid #a0a0a0;
        &-control{
            display: flex;
            justify-content: space-between;
            &-titles{
                font-size: px2rem(24);
                color: #333333;
            }
            &-btn{
                margin-right: px2rem(20);
                font-size: px2rem(30);
                color: #333333;
            }
        }
        &-names{
            display: inline-block;
            font-size: px2rem(24);
            color: #333333;
            margin-top: px2rem(12);
        }
        &-amount{
            font-size: px2rem(24);
            color: #333333;
            margin-left: px2rem(15);
        }
       &-counts{
           display: flex;
            margin-top: px2rem(27);           
           justify-content: space-between;
            &-price{
            font-size: px2rem(28);
            color: #ee6a6a;
           }
           &-numbers{
               display: flex;
               width: px2rem(133);
               height: px2rem(50);
               border: 1px solid #a0a0a0;
               text-align: center;
               border-radius: 4px;
               color: #333333;
               margin-right: px2rem(26);
               &-plus{
                   width: 33%;
                   height: 100%;
                   line-height: px2rem(40);
                   
               }
               &-minus{
                   width: 33%;    
                   height: 100%;
                   line-height: px2rem(40);
                                  
               }
               &-v{
                   width: 33%;    
                   height: 100%;
                   border-left: 1px solid #a0a0a0; 
                   border-right: 1px solid #a0a0a0; 
                   line-height: px2rem(40);
                   color: $basic-color;
                   
               }
           }
        }
    }
}
</style>
